<template>
  <el-card>
    <el-form :inline="true" class="form">
      <el-form-item label="字典名称搜索">
        <el-input placeholder="请你输入字典名称搜索关键字" v-model="dictNameLike"></el-input>
      </el-form-item>
      <el-form-item label="字典编码搜索">
        <el-input placeholder="请你输入字典编码搜索关键字" v-model="dictCodeLike"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="searchTop">搜索</el-button>
        <el-button type="primary" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 0px;">
    <el-button type="primary"  v-has="'sys:dict:add'" size="default" icon="Plus" @click="addTopDict">添加字典项</el-button>
    <el-table border style="margin: 10px 0px;" :data="topDictArr">
      <el-table-column type="index" align="center" label="#"></el-table-column>
      <el-table-column label="字典名称" align="center" prop="dictName" show-overflow-tooltip></el-table-column>
      <el-table-column label="字典编码" align="center" prop="dictCode" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="280px" align="center">
        <!-- row:已有的对象 -->
        <template #="{ row, $index }">
          <el-button type="primary" v-has="'sys:dict:update'" size="small" icon="Edit" @click="updateTopDict(row)">编辑</el-button>
          <el-button type="primary" size="small" icon="Setting" @click="setDictValue(row)">配置字典值</el-button>
          <el-popconfirm :title="`你确定要删除${row.connName}?`" width="260px" @confirm="delDict(row.uuid)">
            <template #reference>
              <el-button type="primary" size="small" icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[3,5,10,20]"
                   :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="items"
                   @current-change="getTopHasDict"
                   @size-change="sizeChange"/>
  </el-card>
  <!-- 添加与更新已有的结构:对话框 -->
  <el-dialog v-model="dialogVisite" :title="dictAddOrUpdateForm.uuid ? '更新字典' : '添加字典'" draggable>
    <el-form label-width="120px"  :model="dictAddOrUpdateForm" :rules="rules" ref="form">
      <el-form-item label="父级字典" v-if="addTopDictButton=='0'" prop="dictParentCode">
        <el-input placeholder="请你输入父级字典编码" v-model="dictAddOrUpdateForm.dictParentCode" disabled ></el-input>
      </el-form-item>
      <el-form-item label="字典名称" prop="dictName">
        <el-input placeholder="请你输入字典名称" v-model="dictAddOrUpdateForm.dictName"></el-input>
      </el-form-item>
      <el-form-item label="字典编码" prop="dictCode">
        <el-input placeholder="请你输入字典编码" v-model="dictAddOrUpdateForm.dictCode" :disabled="dictAddOrUpdateForm.uuid!=''"></el-input>
      </el-form-item>
      <el-form-item label="字典值" v-if="addTopDictButton=='0'" prop="dictValue">
        <el-input placeholder="请你输入字典值" v-model="dictAddOrUpdateForm.dictValue"></el-input>
      </el-form-item>
      <el-form-item label="字典排序" v-if="addTopDictButton=='1'" prop="sortNo">
        <el-input-number
            v-model="dictAddOrUpdateForm.sortNo"
            :min="1"
            controls-position="right"
            class="mx-4"
            @change="handleChange"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" size="default" @click="dialogVisite = false">取消</el-button>
      <el-button type="primary" size="default" @click="save(dictAddOrUpdateForm.dictParentCode)">确定</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogSetDictValue" title="配置字典值" width="1000px">
      <el-form :inline="true" class="form" >
        <el-form-item label="字典名称搜索">
          <el-input placeholder="请你输入字典名称搜索关键字" v-model="dictNameLike"></el-input>
        </el-form-item>
        <el-form-item label="字典编码搜索">
          <el-input placeholder="请你输入字典编码搜索关键字" v-model="dictCodeLike"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="search()">搜索</el-button>
          <el-button type="primary" size="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary"  v-has="'sys:dict:add'" size="default" icon="Plus" @click="addDict">添加字典值</el-button>
      <el-table border style="margin: 10px 0px;" :data="dictArr">
        <el-table-column type="index" align="center" label="#"></el-table-column>
        <el-table-column label="字典名称" align="center" prop="dictName" show-overflow-tooltip></el-table-column>
        <el-table-column label="字典编码" align="center" prop="dictCode" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="280px" align="center">
          <!-- row:已有的对象 -->
          <template #="{ row, $index }">
            <el-button type="primary" size="small"  v-has="'sys:dict:update'" icon="Edit" @click="updateDict(row)">编辑</el-button>
            <el-popconfirm :title="`你确定要删除${row.connName}?`" width="260px" @confirm="delDict(row.uuid)">
              <template #reference>
                <el-button type="primary" size="small" icon="Delete">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 20]"
                     :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="items"
                     @current-change="getTopHasDict"
                     @size-change="sizeChange"/>
  </el-dialog>
</template>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from 'vue';
//引入骨架的仓库
import useLayOutSettingStore from '@/store/modules/setting';
import {ElMessage} from 'element-plus';
import {HandleResponseData, UuidForm, UuidsForm} from "@/api/common/type";
import {reqAddOrUpdateDict, reqBatchDelDict, reqDictInfo, reqDictPageList, reqTopDictPageList,} from "@/api/sys/dict";
import {DictAddOrUpdateForm, DictInfo, DictInfoResponseData, DictList, DictListResponseData} from "@/api/sys/dict/type";

let settingStore = useLayOutSettingStore();
//当前页码
let page = ref<number>(0);
//一页展示几条数据
let pageSize = ref<number>(10);
//搜索关键字
let dictCodeLike = ref<string>('');
let addTopDictButton = ref<string>('1');
let dictNameLike = ref<string>('');
let dictParentCode = ref<string>('');
let dictLike = ref<string>('');
let dictInfo = ref<DictInfo>({
  id: 0,
  //uuid
  uuid: '',
  //数据编码
  dictCode: '',
  //父编码
  dictParentCode: '',
  //字典名称
  dictName: '',
  //字典值
  dictValue: '',
  //0未启用,1正常
  dictStatus: '',
  //排序
  sortNo: 0,
  //是否是顶级
  top: '',
  //创建时间
  createTime: '',
  //修改时间
  updateTime: '',
});
//存储全部已有的数据
let topDictArr = ref<DictInfo[]>([]);
let dictArr = ref<DictInfo[]>([]);
//总个数
let items = ref<number>(0);
//控制对话框的显示与隐藏
let dialogVisite = ref<boolean>(false);
let dialogSetDictValue = ref<boolean>(false);
let uuidsFrom = reactive<UuidsForm>({
  uuids: []
});
let uuidFrom = reactive<UuidForm>({
  uuid: ''
});

//获取form组件实例
let form = ref<any>();
//收集新增数据
let dictAddOrUpdateForm = reactive<DictAddOrUpdateForm>({
  uuid: '',
  dictCode: '',
  dictParentCode: '',
  dictName: '',
  dictValue: '',
  sortNo: 1,
});
//组件挂载完毕
onMounted(() => {
  //获取列表
  getTopHasDict();
});
//获取全部顶级数据的方法|分页器当前页码发生变化的回调
const getTopHasDict = async (pager = 1) => {
  //修改当前页码
  page.value = pager;
  let result: DictListResponseData = await reqTopDictPageList(page.value-1, pageSize.value, dictNameLike.value, dictCodeLike.value);
  if (result.code == '200') {
    items.value = result.result.items;
    topDictArr.value = result.result.data;
  }
}

const getHasDict = async (pager = 1) => {
  //修改当前页码
  page.value = pager;
  let result: DictListResponseData = await reqDictPageList(page.value-1, pageSize.value, dictNameLike.value, dictCodeLike.value,dictParentCode.value);
  if (result.code == '200') {
    items.value = result.result.items;
    dictArr.value = result.result.data;
  }
}

const setDictValue = async (row: DictInfo) => {
  dialogSetDictValue.value = true;
  dictParentCode.value = row.dictCode
  getHasDict();

}
//分页器size下拉菜单的回调
const sizeChange = () => {
  getTopHasDict();
}
//搜索按钮的回调
const search = () => {
  //再次发请求根据关键字
  getHasDict();
  dictCodeLike.value = '';
  dictNameLike.value = '';
}

const searchTop = () => {
  //再次发请求根据关键字
  getTopHasDict();
  dictCodeLike.value = '';
  dictNameLike.value = '';
  dictParentCode.value = '';
}
//重置按钮的回调
const reset = () => {
  settingStore.refsh = !settingStore.refsh;
}

//添加按钮的回调
const addTopDict = () => {
  //清空数据
  Object.assign(dictAddOrUpdateForm, {
    uuid: '',
    dictCode: '',
    dictParentCode: '',
    dictName: '',
    dictValue: '',
    sortNo: 1,
  });
  //对话框显示出来
  dialogVisite.value = true;
  addTopDictButton.value = '1'

  //清空上一次表单校验错误结果
  nextTick(() => {
    form.value.clearValidate('roleName');
  })
}

const addDict = () => {
  //清空数据
  Object.assign(dictAddOrUpdateForm, {
    uuid: '',
    dictCode: '',
    dictParentCode: dictParentCode,
    dictName: '',
    dictValue: '',
    sortNo: 1,
  });
  //对话框显示出来
  dialogVisite.value = true;
  addTopDictButton.value = '0'

  //清空上一次表单校验错误结果
  nextTick(() => {
    form.value.clearValidate('roleName');
  })
}

//更新按钮的回调
const updateTopDict = (row: DictInfo) => {
  addTopDictButton.value = '1'
  //显示出对话框
  dialogVisite.value = true;
  //存储已有的数据----带有uuid的
  Object.assign(dictAddOrUpdateForm, row);
  //清空上一次表单校验错误结果
  nextTick(() => {
    form.value.clearValidate('roleName');
  })
}

//更新按钮的回调
const updateDict = (row: DictInfo) => {
  addTopDictButton.value = '0'
  //显示出对话框
  dialogVisite.value = true;
  //存储已有的数据----带有uuid的
  Object.assign(dictAddOrUpdateForm, row);
  //清空上一次表单校验错误结果
  nextTick(() => {
    form.value.clearValidate('roleName');
  })
}

//确定按钮的回调
const save = async (parentCode:string) => {
  await form.value.validate();

  let result: HandleResponseData = await reqAddOrUpdateDict(dictAddOrUpdateForm);
  if (result.code == '200') {
    ElMessage({type: 'success', message: dictAddOrUpdateForm.uuid ? '更新成功' : '添加成功'});
  } else {
    ElMessage({type: 'error', message: dictAddOrUpdateForm.uuid ? '更新失败' + result.msg : '添加失败' + result.msg});
  }
  dialogVisite.value = false;
  if (dictAddOrUpdateForm.dictValue==''){
    getTopHasDict(dictAddOrUpdateForm.uuid ? page.value : 0);
  } else {
    getHasDict(dictAddOrUpdateForm.uuid ? page.value : 0);
  }
}
//删除
const delDict = async (uuid: string) => {
  uuidsFrom.uuids = [uuid]
  let result: HandleResponseData = await reqBatchDelDict(uuidsFrom);
  if (result.code == '200') {
    ElMessage({type: 'success', message: '删除成功'});
  } else {
    ElMessage({type: 'error', message: '删除失败' + result.msg});
  }
  getTopHasDict(topDictArr.value.length > 1 ? page.value : page.value - 1);

}
</script>

<style scoped>
.form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
</style>
